<template>
    <div class="ztree" :id="ztreeId"></div>
</template>

<script>
import '@ztree/ztree_v3/js/jquery-1.4.4.min'
import '@ztree/ztree_v3/js/jquery.ztree.all.min'
import '@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css'
import {watch} from "vue";
let events=['created','asyncError', 'asyncSuccess', 'check', 'click', 'collapse', 'dblClick', 'drag', 'dragMove', 'drop', 'expand', 'mouseDown', 'mouseUp', 'remove', 'rename', 'rightClick'];
export default {
    props: {
        setting: {
            type: Object,
            require: false,
            default(){
                return {};
            },
        },
        code:String,
        nodes: {
            type: Array,
            require: true,
            default(){
                return [];
            },
        },
        checkbox:Boolean,
        radio:Boolean,

        beforeAsync:Function,
        beforeCheck:Function,
        beforeClick:Function,
        beforeCollapse:Function,
        befreoDblClick:Function,
        beforeDrag:Function,
        beforeDrapOpen:Function,
        beforeDrop:Function,
        beforeEditName:Function,
        beforeExpand:Function,
        beforeMouseDown:Function,
        beforeMouseUp:Function,
        beforeRemove:Function,
        beforeRename:Function,
        beforeRightClick:Function,
    },
    emits:events,
    setup(props,{emit}){
        let callback={};
        events.forEach(e=>{
            let name="on"+e.charAt(0).toUpperCase() + e.slice(1);
            callback[name]= (...arg)=>emit(e,...arg);
            Object.keys(props).forEach(key=>{
                if(key.indexOf("before")===0){
                    callback[key]=props[key];
                }
            })
        });
        let ztreeSetting={
            view: {
                showIcon: true, // default to hide icon
            },
            data:{
                key:{
                    name:"label"
                },
                simpleData:{
                    enable:true,
                    idKey:"value",
                    pIdKey:"pid",
                }
            },
            callback: callback
        };
        if(props.checkbox){
            ztreeSetting.check={
                enable:true,
                chkStyle:"checkbox"
            }
        }else if(props.radio){
            ztreeSetting.check={
                enable:true,
                chkStyle:"radio"
            }
        }
        return {
            ztreeId: "ztree_" + parseInt(Math.random() * 1e10),
            ztreeObj: null,
            list: [],
            ztreeSetting
        };
    },
    watch: {
        nodes: {
            handler(nodes){
                if(this.code||this.url)return;
                this.list = nodes;
                if (this.ztreeObj) this.ztreeObj.destroy();
                this.$nextTick(() => {
                    let lastConfig=Object.assign({}, this.ztreeSetting, this.setting)
                    this.ztreeObj = $.fn.zTree.init($("#" + this.ztreeId),lastConfig,this.list);
                    console.log("zTree config",lastConfig)
                    this.$emit("created", this.ztreeObj);
                });
            },
            deep: true,
            immediate: true,
        },
    },
    unmounted() {
        if (this.ztreeObj) this.ztreeObj.destroy();
    },
    mounted(){
        this.reload();
    },
    methods:{
        getCheckedNodes(){
            return this.ztreeObj.getCheckedNodes(true);
        },
        reload(){
            if(this.url||this.code){
                let lastConfig=Object.assign({}, this.ztreeSetting, this.setting);
                if(this.ztreeObj)this.ztreeObj.destroy();
                if(this.url){
                    this.$ajax.get(this.code).then(rst=>{
                        this.ztreeObj = $.fn.zTree.init($("#" + this.ztreeId),lastConfig,rst.data);
                    })
                }else if(this.code){
                    this.$ajax.getData(this.code).then(data=>{
                        this.ztreeObj = $.fn.zTree.init($("#" + this.ztreeId),lastConfig,data);
                        this.ztreeObj.expandAll(true);
                    })
                }
            }
        }
    }
};
</script>